<template>
  <div class="search-side-bar">
    <div class="heading">
      <h4>Publication Date</h4>
    </div>
    <div class="year-input">
      <input type="number" placeholder="2013" min="2013" v-model="start">
      <span> to </span>
      <input type="number" placeholder="2020" max="2020" v-model="end">
      <a href="javascript:void(0)" @click="change">Confirm</a>
    </div>
    <p class="warning" v-if="err" style="font-size: 0.5em; color: red;">startYear must earlier than endYear</p>
  </div>
</template>

<script>
export default {
  name: "SearchSideBar",

  props: {

  },
  data() {
    return {
      start: this.$route.query.start ?? 2013,
      end: this.$route.query.end ?? 2020,
      err: false
    };
  },
  computed: {

  },
  created() {

  },
  mounted() {

  },
  watch: {

  },
  methods: {
    change(e) {
      e.preventDefault();
      if (this.start > this.end) {
        this.err = true;
        setTimeout(() => {
          this.err = false
        }, 10000);
        return;
      }
      const str = this.$route.query.str;
      const query = {str: str, start: this.start, end: this.end};
      this.$router.push({
        name: 'SearchArticle',
        url: `/article/search`,
        query
      });
    }
  },
  components: {

  },
};
</script>

<style scoped lang="scss">
  .search-side-bar {
    .heading {
      background-color: #f0f0f0;
      padding: 14px 0;
      h4 {
        border-left: 8px solid;
        padding-left: 8px;
        font-style: italic;
      }

    }
    .year-input {
      background-color: #fafafa;
      display: flex;
      align-items: center;
      justify-content: center;
      flex: none;
      padding: 11px 6px;
      border-bottom: 1px solid #ddd;

      span {
        padding: 0 10px;
      }

      input {
        max-width: 60px;
        height: 26px;
        text-align: center;
      }

      a {
        margin-left: 11px;
        border: 2px solid;
        border-color: #fff;
        border-radius: 4px;
        padding: 3px 5px;
        background: #4ec0e9;
        font-size: 15px;
        color: white;
        border-radius: 6px;
        transition: ease-in-out .25s;

        &:hover {
          color: #4ec0e9;
          background: #fff;
          border-color: #4ec0e9;
        }
      }
    }
    
    
  }
</style>
